<template>
	<view>
		<dsl-navbar title="消息" bgTopImg="white" ></dsl-navbar>
		<view class="flex justify-between padding ">
			<view v-for="(item,index) in classifyList" :key="index" @click="classifyMen(item)" hover-class="bg-gray">
				<image :src="item.url" mode="" class="classify_icon animation-scale-up"></image>
				<view class="classify_title">{{item.title}}</view>
			</view>
		</view>
		<view class="align-center padding solid-bottom" v-for="(item,inedx) in 1 " :key="inedx" @click="messageMen()">
			<image src="/static/message/imgxiaoxi-3.png" mode="" class="message_icon"></image>
			<view class="margin-left">
				<view class="justify-between flex">
					<view class="message_title one_overflow">动态消息</view>
					<view class="text-sm text-gray">11</view>
					<!-- {{item.unread}} -->
				</view>
				<view class="message_content one_overflow">恭喜您！您有一份价值588元的订单已经下单...</view>
			</view>
		</view>
		<view class="align-center padding solid-bottom " v-for="(item,d) in messageList" :key="item.id"
			@click="chatMen(item)" >
			<image :src="item.avatar" mode="aspectFill" class="message_icon animation-fade"></image>
			<view class="margin-left">
				<view class="justify-between flex">
					<view class="message_title one_overflow">{{item.userName || '游客'}}</view>
					<view class="one_overflow chat_time" v-if="item.unread==0">
						{{item.createTime}}</view>
					<view style="width: 110rpx;" v-else class="justify-end">
						<view class="round bg-red text-sm"
							style="height: 34rpx;width: 34rpx;line-height: 34rpx;text-align: center;">{{item.unread}}
						</view>
					</view>
				</view>
				<view class="message_content one_overflow">
					
					{{item.type=='text'?item.content:item.type=='image'?'[图片]':item.type =='audio'?'[语音]':item.type=='icon'?'[表情]':'快来一起聊天吧~'}}
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				classifyList: [{
						title: '动态通知',
						id: '',
						url: '/static/message/imgtongzhi.png',
						toUrl: '/pages/message/messageInform'
					},
					{
						title: '好友列表',
						id: '',
						url: '/static/message/imgliebiao.png',
						toUrl: '/pages/message/friendList'
					},
					{
						title: '聊过的人',
						id: '',
						url: '/static/message/imgliaoguo.png',
						toUrl: '/pages/message/familiarList'
					}
				],
				pageNum: 1, //第一页
			}
		},

	

		onShow() {
			this.pageNum = 1
			this.chatListMen()
		},
		computed: {
			...mapState('chat', ['messageList', 'user_id'])
		},
		methods: {
			...mapActions('chat', ['chatListApi']),
			//消息列表
			chatListMen() {
				this.chatListApi({
					userId: this.user_id,
					pageSize: 20,
					pageNum: this.pageNum,
				})
			},
			//触底
			onReachBottom(e) {
				this.pageNum++
				this.chatListMen()
			},
			//消息分类
			classifyMen(item) {
				uni.navigateTo({
					url: item.toUrl
				})
			},
			//动态消息
			messageMen() {
				uni.navigateTo({
					url: '/pages/message/activeMessage'
				})
			},
			chatMen(e) {
				// 消息跳转
				uni.setStorageSync('ta_id', e.taId)
				let url = e.avatar
				getApp().globalData.taAvatar = url
				uni.navigateTo({
					url: `/pages/chat/chat?avatar=${e.avatar}&taId=${e.taId}&userName=${e.userName}`
				})
			}
		},
		components: {}
	}
</script>

<style>
	.classify_icon {
		width: 108rpx;
		height: 108rpx;
	}

	.classify_title {
		font-family: PingFang SC;
		font-weight: bold;
		color: #171D34;
		opacity: 1;
	}

	.message_icon {
		width: 88rpx;
		height: 88rpx;
		background: #FF8F2E;
		border-radius: 50%;
		opacity: 1;
	}

	.message_title {
		width: 450rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.message_content {
		width: 494rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
		margin-top: 20rpx;
	}
	.chat_time{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 200;
		width: 110rpx;
		color: #9AA2B5;
		opacity: 1;
	}

	view {
		/* border: 1rpx solid red; */
	}
</style>
